{% extends "admin/base.html" %}

{% block stylesheets %}
	<link rel="stylesheet" href="{{ url_for('views.themes', theme='admin', path='css/challenge-board.css') }}">
{% endblock %}


{% block content %}
{% if en %}
<div class="jumbotron">
    <div class="container">
        <h1><b>Challenges</b>
            <a class="no-decoration" href="{{ url_for('admin.challenges_new') }}">
				<span role="button" data-toggle="tooltip" title="Create Challenge">
					<i class="btn-fa fas fa-plus-circle"></i>
				</span>
            </a>
        </h1>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            {% if q and field %}
            <h5 class="text-muted text-center">
                Searching for challenges with <strong>{{ field }}</strong> matching <strong>{{ q }}</strong>
            </h5>
            <h6 class="text-muted text-center pb-3">
                {{ total }} results
            </h6>
            {% endif %}

            {% with form = Forms.challenges.ChallengeSearchForm(field=field, q=q) %}
            <form method="GET" class="form-inline">
                <div class="form-group col-md-2">
                    {{ form.field(class="form-control custom-select w-100") }}
                </div>
                <div class="form-group col-md-8">
                    {{ form.q(class="form-control w-100", placeholder="Search for matching challenge") }}
                </div>
                <div class="form-group col-md-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search" aria-hidden="true"></i>
                    </button>
                </div>
            </form>
            {% endwith %}
        </div>
    </div>

    <hr>

    <div class="row">
        <div class="col-md-12">
            <div class="float-right pb-3">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-secondary" data-toggle="tooltip" title="Edit Challenges" id="challenges-edit-button" style="margin-right: 10px;">
                        <i class="btn-fa fas fa-pencil-alt"></i>
                    </button>
                    <button type="button" class="btn btn-outline-danger" data-toggle="tooltip" title="Delete Challenges" id="challenges-delete-button">
                        <i class="btn-fa fas fa-trash-alt"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 table-responsive">
            <div>
                <table id="challenges" class="table table-striped border">
                    <thead>
                    <tr>
                        <td class="d-block border-right border-bottom text-center" data-checkbox>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" autocomplete="off" data-checkbox-all>&nbsp;
                            </div>
                        </td>
                        <th class="sort-col text-center"><b>ID</b></th>
                        <th class="sort-col"><b>Name</b></th>
                        <th class="sort-col"><b>Category</b></th>
                        <th class="d-none d-md-table-cell d-lg-table-cell sort-col"><b>Subcategory</b></th>
                        <th class="sort-col text-center"><b>Value</b></th>
                        <th class="sort-col text-center"><b>Type</b></th>
                        <th class="sort-col text-center"><b>State</b></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for challenge in challenges %}
                    <tr data-href="{{ url_for('admin.challenges_detail', challenge_id=challenge.id) }}">
                        <td class="d-block border-right text-center" data-checkbox>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" value="{{ challenge.id }}" autocomplete="off" data-challenge-id="{{ challenge.id }}">&nbsp;
                            </div>
                        </td>
                        <td class="text-center">{{ challenge.id }}</td>
                        <td><a href="{{ url_for('admin.challenges_detail', challenge_id=challenge.id) }}" style="word-wrap: break-word;word-break: break-word;">{{ challenge.name }}</a></td>
                        <td>{{ challenge.category }}</td>
                        <td>
                            {{challenge.subcategory}}
                        </td>
                        <td class="text-center">{{ challenge.value }}</td>
                        <td class="text-center">{{ challenge.type }}</td>
                        <td class="text-center">
                            {% set badge_state = 'badge-danger' if challenge.state == 'hidden' else 'badge-success' %}
                            <span class="badge {{ badge_state }}">{{ challenge.state }}</span>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% else %}
<div class="jumbotron">
    <div class="container">
        <h1><b>题目列表</b>
            <a class="no-decoration" href="{{ url_for('admin.challenges_new') }}">
				<span role="button" data-toggle="tooltip" title="创建题目">
					<i class="btn-fa fas fa-plus-circle"></i>
				</span>
            </a>
        </h1>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            {% if q and field %}
            <h5 class="text-muted text-center">
                搜索 <strong>{{ field }}</strong> 匹配 <strong>{{ q }}</strong> 的题目
            </h5>
            <h6 class="text-muted text-center pb-3">
                {{ total }} 结果
            </h6>
            {% endif %}

            {% with form = Forms.challenges.ChallengeSearchForm(field=field, q=q) %}
            <form method="GET" class="form-inline">
                <div class="form-group col-md-2">
                    {{ form.field(class="form-control custom-select w-100") }}
                </div>
                <div class="form-group col-md-8">
                    {{ form.q(class="form-control w-100", placeholder="搜索匹配的题目") }}
                </div>
                <div class="form-group col-md-2">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search" aria-hidden="true"></i>
                    </button>
                </div>
            </form>
            {% endwith %}
        </div>
    </div>

    <hr>

    <div class="row">
        <div class="col-md-12">
            <div class="float-right pb-3">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-secondary" data-toggle="tooltip" title="编辑题目" id="challenges-edit-button" style="margin-right: 10px;">
                        <i class="btn-fa fas fa-pencil-alt"></i>
                    </button>
                    <button type="button" class="btn btn-outline-danger" data-toggle="tooltip" title="删除题目" id="challenges-delete-button">
                        <i class="btn-fa fas fa-trash-alt"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 table-responsive">
            <div>
                <table id="challenges" class="table table-striped border">
                    <thead>
                    <tr>
                        <td class="d-block border-right border-bottom text-center" data-checkbox>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" autocomplete="off" data-checkbox-all>&nbsp;
                            </div>
                        </td>
                        <th class="sort-col text-center"><b>ID</b></th>
                        <th class="sort-col"><b>名称</b></th>
                        <th class="sort-col"><b>目录</b></th>
                        <th class="d-none d-md-table-cell d-lg-table-cell sort-col"><b>子目录</b></th>
                        <th class="sort-col text-center"><b>分值</b></th>
                        <th class="sort-col text-center"><b>类型</b></th>
                        <th class="sort-col text-center"><b>状态</b></th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for challenge in challenges %}
                    <tr data-href="{{ url_for('admin.challenges_detail', challenge_id=challenge.id) }}">
                        <td class="d-block border-right text-center" data-checkbox>
                            <div class="form-check">
                                <input type="checkbox" class="form-check-input" value="{{ challenge.id }}" autocomplete="off" data-challenge-id="{{ challenge.id }}">&nbsp;
                            </div>
                        </td>
                        <td class="text-center">{{ challenge.id }}</td>
                        <td><a href="{{ url_for('admin.challenges_detail', challenge_id=challenge.id) }}" style="word-wrap: break-word;word-break: break-word;">{{ challenge.name }}</a></td>
                        <td>{{ challenge.category }}</td>
                        <td>
                            {{challenge.subcategory}}
                        </td>
                        <td class="text-center">{{ challenge.value }}</td>
                        <td class="text-center">{{ challenge.type }}</td>
                        <td class="text-center">
                            {% set badge_state = 'badge-danger' if challenge.state == 'hidden' else 'badge-success' %}
                            <span class="badge {{ badge_state }}">{{ challenge.state }}</span>
                        </td>
                    </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}

{% block scripts %}
{% endblock %}

{% block entrypoint %}
	<script defer src="{{ url_for('views.themes', theme='admin', path='js/pages/challenges.js') }}"></script>
{% endblock %}
